<template>
  <div style="margin-left: 15px; margin-right: 15px">
    <h2>学生管理</h2>
    <el-button type="primary" icon="el-icon-plus" @click="addStudent"
      >添加学生信息</el-button
    >

    <el-table
      :data="StudentManagementInfo"
      style="width: 100%; margin-top: 10px"
    >
      <el-table-column
        label="学号"
        width="200"
        prop="studentNumber"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="studentName"
        label="姓名"
        width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="sex" label="性别" width="60" align="center">
      </el-table-column>
      <el-table-column
        prop="DataOfBirth"
        label="出生年月"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="TimeOfEnrollment"
        label="入学时间"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="college" label="学院" width="150" align="center">
      </el-table-column>

      <el-table-column prop="prop" label="操作" width="150">
        <template slot-scope="{ row, $index }">
          <el-button
            type="primary"
            size="mini"
            @click="changeSubject(row, $index)"
            >修改</el-button
          >
          <el-button type="danger" size="mini" @click="deleteSubject($index)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加学生 -->
    <el-dialog
      :title="this.studentForm.studentNumber ? '修改学生信息' : '添加学生信息'"
      :visible.sync="dialogFormVisible"
      center="center"
    >
      <el-form ref="form" label-width="100px">
        <el-form-item label="学号">
          <el-input
            v-model="studentForm.studentNumber"
            placeholder=""
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="studentForm.studentName" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="studentForm.sex" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="出生年月">
          <el-input v-model="studentForm.DataOfBirth" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="入学时间">
          <el-input
            v-model="studentForm.TimeOfEnrollment"
            placeholder=""
          ></el-input>
        </el-form-item>
        <el-form-item label="学院">
          <el-select v-model="studentForm.college" placeholder="请选择学院">
            <el-option
              v-for="(item, index) in options"
              :key="index"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handler">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
export default {
  name: "StudentManagement",
  components: {},
  data() {
    return {
      StudentManagementInfo: [],
      options: [
        {
          value: "计算机科学与技术学院",
          label: "计算机科学与技术学院",
        },
        {
          value: "食品工程学院",
          label: "食品工程学院",
        },
        {
          value: "生化学院",
          label: "生化学院",
        },
        {
          value: "通信工程学院",
          label: "通信工程学院",
        },
        {
          value: "政法学院",
          label: "政法学院",
        },
        {
          value: "体育学院",
          label: "体育学院",
        },
      ],
      studentForm: {
        studentNumber: "522307260115",
        studentName: "于苗苗",
        sex: "女",
        DataOfBirth: "2002-01-22",
        TimeOfEnrollment: "2023-09-05",
        college: "计算机系",
      },
      dialogFormVisible: false,
      index: "",
    };
  },
  methods: {
    async getCourseManagementInfo() {
      let StudentManagementInfo = await import(
        "@/data/studentmanagementInfo.json"
      );

      this.StudentManagementInfo = StudentManagementInfo.studentmanagement;
    },
    // 添加课程
    addStudent() {
      this.studentForm = {};
      this.dialogFormVisible = true;
    },

    //保存课程
    handler() {
      if (this.index >= 0) {
        this.StudentManagementInfo.splice(this.index, 1, this.studentForm);
      } else {
        this.StudentManagementInfo.unshift(this.studentForm);
      }
      this.dialogFormVisible = false;
      this.$message({
        type: "success",
        message: this.studentForm.subject ? "修改学生成功" : "添加学生成功",
        offset: 120,
      });
    },
    //修改课程
    changeSubject(row, index) {
      this.index = index;
      console.log(row);
      //深拷贝反正操作同一个地址
      this.studentForm = { ...row };
      this.dialogFormVisible = true;
    },
    //删除课程
    deleteSubject(index) {
      this.StudentManagementInfo.splice(index, 1);
      this.$message({
        type: "success",
        offset: 120,
        message: "删除成功",
      });
    },
  },

  mounted() {
    this.getCourseManagementInfo();
  },
};
</script>


<style scoped>
h2 {
  text-align: center;
}
</style>